﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskedTextBox.aspx.cs" Inherits="GILBERT.WEB.MaskedTextBox" %>

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/css/shieldui-all.min.css" />
    <link id="gridcss" rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/css/light-mint/all.min.css" />
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
</head>
<body class="theme-light">
<div>
    <div class="container"> 
           <div class="top"></div>
           <table align="center" style="margin: 0px auto;">
                   <tr>
                       <td class="labelcell"><b>Seller</b></td>
                       <td colspan="2" class="datacell"></td>                       
                       <td class="labelcell"><b>Buyer</b></td>
                       <td colspan="2" class="datacell"></td>
                   </tr>
                   <tr>
                       <td class="labelcell"><b>Name:</b></td>
                       <td colspan="2" class="datacell">[Name]</td>                       
                       <td class="labelcell"><b>Name:</b></td>
                       <td colspan="2" class="datacell">[Name]</td>
                   </tr>
                   <tr>
                       <td class="labelcell"><b>Company:</b></td>
                       <td colspan="2" class="datacell">[Company Name]</td>                       
                       <td class="labelcell"><b>Company:</b></td>
                       <td colspan="2" class="datacell">[Company Name]</td>
                   </tr>
                   <tr>
                       <td class="labelcell"><b>Address:</b></td>
                       <td colspan="2" class="datacell">[Street Address]</td>                       
                       <td class="labelcell"><b>Address:</b></td>                       
                       <td colspan="2" class="datacell">[Street Address]</td>
                   </tr>
                   <tr>
                       <td class="labelcell"><b>City:</b></td>
                       <td colspan="2" class="datacell">[City]</td>                       
                       <td class="labelcell"><b>City:</b></td>                       
                       <td colspan="2" class="datacell">[City]</td>
                   </tr>
                   <tr>
                       <td class="labelcell"><b>Zip Code:</b></td>
                       <td colspan="2" class="datacell"><input id="zip1" type="text" value="IL 60606" /></td>                       
                       <td class="labelcell"><b>Zip Code:</b></td>           
                       <td colspan="2" class="datacell"><input id="zip2" type="text" /></td>
                   </tr>
                   <tr>
                       <td class="labelcell"><b>Phone:</b></td>
                       <td colspan="2" class="datacell"><input id="phone1" type="text" /></td>                       
                       <td class="labelcell"><b>Phone:</b></td>                       
                       <td colspan="2" class="datacell"><input id="phone2" type="text" value="0044 20 5555 6666" /></td>
                   </tr>
                   <tr>
                       <td class="labelcell"><b>Customer ID:</b></td>
                       <td colspan="2" class="datacell">[ABC12345]</td>                       
                       <td class="labelcell"><b>Customer ID:</b></td>         
                       <td colspan="2" class="datacell">[ABC12345]</td>
                   </tr>
                   <tr>
                       <td colspan="6" style="padding-top:70px;"></td>
                   </tr>
                   <tr>
                       <td class="headercell">Qty</td>
                       <td class="headercell">Item#</td>
                       <td class="headercell">Description</td>
                       <td class="headercell">Unit Price</td>
                       <td class="headercell">Discount</td>
                       <td class="headercell">Total</td>
                   </tr>
                   <tr>
                       <td class="bodycell">1</td>
                       <td class="bodycell">Hoist 3.2t</td>
                       <td class="bodycell">-</td>
                       <td class="bodycell"><input id="unitprice1" type="text" style="width:85px" /></td>
                       <td class="bodycell">10%</td>
                       <td class="bodycell"><span id="total1">10,800.00$</span></td>
                   </tr>
                   <tr>
                       <td class="bodycell">1</td>
                       <td class="bodycell">Hoist 5t</td>
                       <td class="bodycell">-</td>
                       <td class="bodycell"><input id="unitprice2" type="text" style="width:85px" /></td>
                       <td class="bodycell">10%</td>
                       <td class="bodycell"><span id="total2">18,000.00$</span></td>
                   </tr>
                   <tr>
                       <td class="bodycell"></td>
                       <td class="bodycell"></td>
                       <td class="bodycell"></td>
                       <td class="bodycell"></td>
                       <td class="bodycell"><b>Total:</b></td>
                       <td class="bodycell"><span id="grandtotal">28,800.00$</span></td>
                   </tr>
           </table>
    </div>
</div>
<script type="text/javascript">
    jQuery(function ($) {
        $("#phone1").shieldMaskedTextBox({
            enabled: true,
            mask: "(000)-000-0000",
            value: "(945)-505-3429"
        });
        $("#phone2").shieldMaskedTextBox({
            enabled: true,
            mask: "0000 00 0000 0000"
        });
        $("#unitprice1").shieldMaskedTextBox({
            enabled: true,
            mask: "000,000.00$",
            value: "012,000.00$",
            events: {
                blur: function () {
                    var total1 = $("#total1");
                    var total2 = $("#total2");
                    var grandtotal = $("#grandtotal");
                    var value = this.value();
                    var priceVal1 = parseFloat(value.replace(/[^0-9-.]/g, ''));
                    var priceVal2 = parseFloat(total2.html().replace(/[^0-9-.]/g, ''));
                    if (isNaN(priceVal1)) {
                        total1.html('-');
                        return;
                    }
                    priceVal1 *= 0.9;
                    total1.html(shield.format("{0:c2}", priceVal1));
                    grandtotal.html(shield.format("{0:c2}", priceVal1 + priceVal2));
                }
            }
        });
        $("#unitprice2").shieldMaskedTextBox({
            enabled: true,
            mask: "000,000.00$",
            value: "020,000.00$",
            events: {
                blur: function () {
                    var total1 = $("#total1");
                    var total2 = $("#total2");
                    var grandtotal = $("#grandtotal");
                    var value = this.value();
                    var priceVal2 = parseFloat(value.replace(/[^0-9-.]/g, ''));
                    var priceVal1 = parseFloat(total1.html().replace(/[^0-9-.]/g, ''));
                    if (isNaN(priceVal2)) {
                        total2.html('-');
                        return;
                    }
                    priceVal2 *= 0.9;
                    total2.html(shield.format("{0:c2}", priceVal2));
                    grandtotal.html(shield.format("{0:c2}", priceVal1 + priceVal2));
                }
            }
        });
        $("#zip1").shieldMaskedTextBox({
            enabled: true,
            mask: "LL 000000"
        });
        $("#zip2").shieldMaskedTextBox({
            enabled: true,
            mask: "LL0L 0LL",
            value: "EC1A 1AA"
        });
    });
</script>
<style>
     .container {
        background-image: url("/Content/img/maskedtextbox/sales_order.jpg");
        background-position: center;
        background-repeat: no-repeat;
        height: 727px;
        text-align: center;        
    }
   .top {
        padding-top: 100px;
    }
    .headercell {
        background-color:#E3EAF4;
        width:80px;
        text-align:center;
        font-family:Arial;
        font-size:12px;
        font-weight:bold;
    }
    .bodycell {
        text-align:center;
        font-family:Arial;
        font-size:12px;
    }
    .labelcell {        
        text-align:right;
        padding-right:5px;
        font-family:Arial;
        font-size:11px;
    }
    .datacell {
        text-align:left;
        padding-left:5px;        
        font-family:Arial;
        font-size:11px;
    }
</style>
</body>
</html>